<template>
  <view class="award-wrap">
		<view class="award">
			<header-title :title="headerTitle" class="header"></header-title>
			<view class="charts-wrap">
				<view class="left">
					<view class="qiun-charts3">
						<canvas canvas-id="canvasArcbar1" id="canvasArcbar1" class="charts3"></canvas>
					</view>
				</view>
				<view class="right">
					<progress-bar class="progress-bar" :list="prizeList" v-if="prizeList.length"></progress-bar>
				</view>
			</view>
		</view>
		<view class="punish">
			<header-title :title="headerTitleTwo"></header-title>
			<view class="charts-wrap">
				<view class="left">
					<view class="qiun-charts3">
						<canvas canvas-id="canvasArcbar2" id="canvasArcbar2" class="charts3"></canvas>
					</view>
				</view>
				<view class="right">
					<progress-bar class="progress-bar" :list="penaltyList" :isBlue="false" v-if="penaltyList.length"></progress-bar>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerTitle from './header'
	import uCharts from '../../../components/u-charts/u-charts/u-charts'
	import progressBar from './progress-bar'
	import {rewardsRequest} from '../../../api/charts'
	let _self;
	let canvaArcbar1;
export default {
	name: 'award',
	components: {
		progressBar,
		headerTitle
	},
  data() {
    return {
			headerTitle: '奖励情况分析',
			headerTitleTwo: '处罚情况分析',
			cWidth3:'',//圆弧进度图
			cHeight3:'',//圆弧进度图
			arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
			pixelRatio:1,
			Arcbar1: {
				series: [{
					name: '',
					data: 0,
					color: '#1CD4EC'
				}]
			},
			Arcbar2: {
				series: [{
					name: '',
					data: 0.486,
					color: '#43CF90'
				}]
			},
			prizeList: [],
			penaltyList: []
		}
	},
	created() {
		_self = this;
		this.cWidth3=uni.upx2px(250);//这里要与样式的宽高对应
		this.cHeight3=uni.upx2px(250);//这里要与样式的宽高对应
		this.arcbarWidth=uni.upx2px(24);
		this.getServerData();
	},
	components: {
		headerTitle
	},
	methods: {
		async getServerData(){
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data:{
				// 	},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		let Arcbar1={series:[]};
				// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		Arcbar1.series=res.data.data.Arcbar1.series;
				// 		_self.showArcbar("canvasArcbar1",Arcbar1);
				// 	},
				// 	fail: () => {
				// 		_self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
				uni.showLoading({
					title: '加载中'
				})
				const res = await rewardsRequest()
				uni.hideLoading()
				console.log(res)
				this.Arcbar1.series[0].data = res.prizeCount
				this.Arcbar2.series[0].data = res.penaltyCount
				this.prizeList = res.prizeList
				this.penaltyList = res.penaltyList
				this.showArcbar("canvasArcbar1",this.Arcbar1);
				this.showArcbar("canvasArcbar2",this.Arcbar2);
			},
			showArcbar(canvasId,chartData){
				canvaArcbar1=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize:11,
					legend:false,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth3*_self.pixelRatio,
					height: _self.cHeight3*_self.pixelRatio,
					dataLabel: true,
					title: {
						name: Math.round(chartData.series[0].data*100)+'%',//这里我自动计算了，您可以直接给任意字符串
						color: chartData.series[0].color,
						fontSize: 25*_self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,//这里您可以直接给任意字符串
						color: '#666666',
						fontSize: 15*_self.pixelRatio
					},
					extra: {
						arcbar:{
							type:'default',
							width: _self.arcbarWidth*_self.pixelRatio,//圆弧的宽度
						}
					}
				});
				
			}
	}
}

</script>
<style lang='scss' scoped>
.award-wrap {
  width: 100%;
	padding: 20upx;
	background-color: #f0f0f0;
	box-sizing: border-box;
	.award{
		width: 100%;
		min-height:411upx;
		background:rgba(255,255,255,1);
		border-radius:10upx;
		margin-bottom: 20upx;
		padding-bottom: 20upx;
		box-sizing: border-box;
	}
	.punish{
		width: 100%;
		min-height:411upx;
		padding-bottom: 20upx;
		box-sizing: border-box;
		background:rgba(255,255,255,1);
		border-radius:10upx;
	}
	.charts-wrap{
		display: flex;
		width: 100%;
		overflow: hidden;
		.left{
			margin-top: 56upx;
			width:250upx;
			// height:200upx;
			// border: 20upx solid #f0f0f0;
			// border-bottom-color: #24BCF9;
			// box-sizing: border-box;
			// border-radius: 50%;
			// margin-left: 32upx;
		}
		.right {
			flex: 1;
			padding-right: 40upx;
			padding-left: 10upx;
			padding-top: 26upx;
			box-sizing: border-box;
			.progress-bar{
				margin-bottom: 10upx;
			}
		}
	}
}
.qiun-charts3 {
	width: 250upx;
	height: 250upx;
	background-color: #FFFFFF;
	position: relative;
}

.charts3 {
	position: absolute;
	width: 250upx;
	height: 250upx;
	background-color: #FFFFFF;
}
</style>